<template>
  <view style="width: 100%; height: 100%">
    <home
      style="width: 100%; height: 100%"
      @ShowNews="ShowNews"
      v-if="PageCur == 'home'"
    ></home>
    <search
      style="width: 100%; height: 100%"
      v-if="PageCur == 'search'"
    ></search>
    <call style="width: 100%; height: 100%" v-if="PageCur == 'call'"></call>
    <news style="width: 100%; height: 100%" v-if="PageCur == 'news'"></news>
    <me style="width: 100%; height: 100%" v-if="PageCur == 'me'"></me>

    <view class="box">
      <view class="cu-bar tabbar bg-white shadow foot">
        <view class="action" @click="NavChange" data-cur="home">
          <view class="cuIcon-cu-image">
            <image
              v-if="PageCur == 'home'"
              src="../../static/tabBar/index_cur.png"
            ></image>
            <image
              v-if="PageCur != 'home'"
              src="../../static/tabBar/index.png"
            ></image>
          </view>
          <view :class="PageCur == 'home' ? 'color_main' : 'text-gray'"
            >急救知识</view
          >
        </view>

        <view class="action" @click="NavChange" data-cur="search">
          <view class="cuIcon-cu-image">
            <view class="cu-tag badge"><!-- 红点 --></view>
            <image
              v-if="PageCur == 'search'"
              src="../../static/tabBar/shop_cur.png"
            ></image>
            <image
              v-if="PageCur != 'search'"
              src="../../static/tabBar/shop.png"
            ></image>
          </view>
          <view :class="PageCur == 'search' ? 'color_main' : 'text-gray'"
            >教程</view
          >
        </view>

        <view
          @click="NavChange"
          class="action text-gray add-action"
          data-cur="call"
        >
          <image
            class="logo_btn"
            mode="widthFix"
            src="../../static/logo.png"
          ></image>
          <view :class="PageCur == 'call' ? 'color_main' : 'text-gray'"
            >易呼救</view
          >
        </view>

        <view class="action" @click="NavChange" data-cur="news">
          <view class="cuIcon-cu-image">
            <view class="cu-tag badge">{{ message }}</view>
            <image
              v-if="PageCur == 'news'"
              src="../../static/tabBar/order_cur.png"
            ></image>
            <image
              v-if="PageCur != 'news'"
              src="../../static/tabBar/order.png"
            ></image>
          </view>
          <view :class="PageCur == 'news' ? 'color_main' : 'text-gray'"
            >志愿者</view
          >
        </view>

        <view class="action" @click="NavChange" data-cur="me">
          <view class="cuIcon-cu-image">
            <image
              v-if="PageCur == 'me'"
              src="../../static/tabBar/me_cur.png"
            ></image>
            <image
              v-if="PageCur != 'me'"
              src="../../static/tabBar/me.png"
            ></image>
          </view>
          <view :class="PageCur == 'me' ? 'color_main' : 'text-gray'"
            >个人中心</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import request from '@/common/request.js'
import home from '../../pages/home/index.vue'
import search from '../../pages/pinia'
import call from '../../pages/call'
import news from '../../pages/uview'
import me from '../../pages/me'

const PageCur = ref('call')
const message = ref('0')
const openId = ref('')
const access_token = ref('')
const tip = ref('我是提示')
const duration = ref(1)

const getData = () => {
  const opts = {
    url: 'api/blog/list',
    method: 'get'
  }
  uni.showLoading({
    title: '加载中'
  })
  request.httpRequest(opts).then((res) => {
    uni.hideLoading()
    if (res.statusCode == 200) {
      message.value = res.data.data.length
    } else {
      console.log('数据请求错误～')
    }
  })
}

const ShowNews = (e) => {
  PageCur.value = e
}

const NavChange = (e) => {
  PageCur.value = e.currentTarget.dataset.cur
  console.log(PageCur.value)
  // Add your code here for setting page title
}

const NavChange_xd = () => {
  uni.navigateTo({
    url: 'publish',
    animationType: 'slide-in-bottom',
    animationDuration: 200
  })
}

onMounted(() => {
  // getData()
  // Add code here to handle page load (previously "onLoad" method)
})
</script>

<style lang="scss">
.color_main {
  color: #000000;
  font-weight: 900;
}
.box {
  margin: 20upx 0;
}
.box view.cu-bar {
  margin-top: 20upx;
}

.logo_btn {
  width: 38 * 2rpx;
  height: 38 * 2rpx;
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  top: -40rpx;
  left: 0rpx;
  right: 0;
  margin: auto;
  padding: 0;
}
.cu-bar.tabbar .action.add-action {
  padding-top: 56rpx !important;
}
</style>
